<template>
    <div class="tongjitable-wrap">
        <div class="header">
            <flexbox>
                <img src="@/assets/images/beijixing/beijixing-icon.png" style="width: 24px" />
                <span class="margin-l-8 font-w-b">指标统计数据</span>
            </flexbox>
            <div style="color: #70798b" class="margin-t-8" v-if="route.query.isOutsideSystem === '0'"
                >当前统计时间段 {{ $moment(route.query.startTime).format('YYYY-MM-DD') }}~{{
                    $moment(route.query.endTime).format('YYYY-MM-DD')
                }}
                ，上线产品需求{{ totalA + totalB + totalC }}个</div
            >
            <div style="color: #70798b" class="margin-t-8" v-if="route.query.isOutsideSystem === '1'"
                >当前统计时间段 {{ $moment(route.query.startTime).format('YYYY-MM-DD') }}~{{
                    $moment(route.query.endTime).format('YYYY-MM-DD')
                }}
                ，新增产品需求{{ totalA + totalB + totalC }}个</div
            >
        </div>
        <div class="cont">
            <TableA :detail="detail" @change="changeTotal($event, 'A')" />
            <TableB :detail="detail" @change="changeTotal($event, 'B')" />
            <TableC :detail="detail" @change="changeTotal($event, 'C')" />
        </div>
    </div>
</template>

<script lang="ts">
import TableA from './TableA.vue';
import TableB from './TableB.vue';
import TableC from './TableC.vue';
import { useRoute } from 'vue-router';
import { defineComponent, reactive, toRefs } from 'vue';
interface State {
    totalA: number;
    totalB: number;
    totalC: number;
}
export default defineComponent({
    name: 'ZhiBiaoTongjiTable',
    components: {
        TableA,
        TableB,
        TableC
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup() {
        const route = useRoute();
        const state = reactive<State>({
            totalA: 0,
            totalB: 0,
            totalC: 0
        });
        const changeTotal = (val, field) => {
            state[`total${field}`] = val;
        };
        return {
            ...toRefs(state),
            changeTotal,
            route
        };
    }
});
</script>

<style scoped lang="less">
.tongjitable-wrap {
    .header {
        padding: 16px;
    }
    .cont {
        padding: 12px;
    }
}
</style>
